<template>
  <div id="newAnalysis">
    <h1 class="con-right-title">
      新增分析
    </h1>
    <h3 class="echarts-title">
      新增用户数
      <popover :descriptionData="addUser"></popover>
    </h3>
    <!--上部搜索条件组件-->
    <topSearch
      :form-inline="formInline"
      @toSearch="toSearch"
      @setPeriodList="setPeriodList"
    ></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:newAnalysis:export'"
        type="warning"
        icon="el-icon-download"
        @click="exportRoles"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <div class="table-conBtn margin0">
      <el-radio-group v-model="period" class="date-btn">
        <el-radio-button
          v-for="item in periodList"
          :label="item.dictValue"
          :key="item.dictValue"
        >
          {{ item.dictLabel }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <div id="newLine" class="box"></div>
  </div>
</template>

<script>
import { getList, exportList } from '@/api/dataStatistics/newAnalysis/index.js' // 接口
import { sysNormalDisable } from '@utils/dictionariesFunc'
import topSearch from '@component/dataStatistics/newAnalysis/topSearch' // 上部搜索条件
import popover from '@component/dataStatistics/common/popover' // 注释说明
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getInterval } from '@utils/pubFunction'
export default {
  name: 'analyse',
  msg: '新增分析',
  /* mixins: [saveScrollMixins],*/
  components: {
    topSearch,
    popover
    // dialogAddEdit
  },
  watch: {
    period(newV, oldV) {
      /*日/周/月*/

      this.periodList.forEach((item) => {
        if (item.dictValue === newV) {
          this.type = item.dictLabel
        }
      })
      if (!this.clickSearch) {
        this.searchList()
      }
    }
  },
  data() {
    return {
      type: '日',
      clickSearch: false, //是否点击查询按钮
      period: '',
      option: {
        legend: {
          data: ['全部', '正式', '定金', '试学', '无身份'],
          selected: {
            正式: false,
            定金: false,
            试学: false,
            无身份: false
          },
          left: 40
        },
        tooltip: {
          trigger: 'axis'
          /* formatter: '{b}<br/>' + type + '新增用户: {c}人'*/
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            length: 5
          },
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: [
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' }
        ]
      },
      optDefault: {
        xAxis: {
          data: [],
          axisLabel: {
            interval: 0
          }
        },
        series: [
          { name: '全部', data: [] },
          { name: '无身份', data: [] },
          { name: '试学', data: [] },
          { name: '定金', data: [] },
          { name: '正式', data: [] }
        ]
      },
      newLine: null,
      formInline: {
        source: '', //来源
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      periodList: [],
      powerStr: 'system:newAnalysis:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    /* this.toTableScrollHeight()*/
  },
  computed: {
    addUser() {
      return this.$store.state.descriptionData.addUser
    }
  },
  mounted() {
    this.echartsInit()
    // 获取权限
    // this.getPower()
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        } else {
          this.canShowPage = true
          this.$nextTick(() => {
            this.echartsInit()
          })
        }
      })
    },
    /* 获取字典状态 */
    setPeriodList(list) {
      this.periodList = [...list]
      this.period = this.periodList[0].dictValue
    },
    echartsInit() {
      this.newLine = this.echarts.init(document.getElementById('newLine'))
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.newLine.resize()
      })
      this.newLine.setOption(this.option)
      this.setTitle()
    },
    /*设置tooltip、title*/
    setTitle() {
      let _this = this
      this.newLine.setOption({
        tooltip: {
          formatter(params) {
            let str = params[0].name + '<br/>'
            for (var i = 0; i < params.length; i++) {
              str +=
                params[i].seriesName +
                _this.type +
                '新增用户：' +
                params[i].data +
                '人<br/>'
            }
            return str
          }
          /*formatter: '{b}<br/>' + _this.type + '新增用户: {c}人'*/
        }
      })
    },
    /* 获取列表 */
    searchList() {
      if (!this.canGetList) return
      this.loading = true
      let obj = Object.assign({ period: this.period }, this.formInline)
      delete obj.createTime
      this.newLine.showLoading()
      //设置初始值
      this.newLine.setOption(this.optDefault)
      getList(
        obj,
        (response) => {
          this.clickSearch = false
          /*计算x轴间隔*/
          let data = response.data
          let dataLength = data.length
          let interval = 0
          if (dataLength > 10) {
            interval = getInterval(dataLength, 10)
          }
          let opt = {
            xAxis: {
              data: data,
              axisLabel: {
                interval: interval
              }
            },
            series: response.series
          }
          this.newLine.setOption(opt)
          this.newLine.hideLoading()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 导出 */
    exportRoles() {
      this.$confirm('确定导出当前数据吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = Object.assign({ period: this.period }, this.formInline)
        delete obj.createTime
        let url = exportList()
        this.downFile('get', url, obj, '新增分析')
      })
    },
    /* 搜索 */
    toSearch() {
      /*根据时间，判断日月周*/
      /*console.log(this.formInline.startTime, this.formInline.endTime)*/
      let { startTime, endTime } = this.formInline
      let s = new Date(startTime).getTime()
      let e = new Date(endTime).getTime()
      let d = (e - s) / (24 * 60 * 60 * 1000)
      if (d < 31) {
        //统计时间31天内，默认【天】统计
        this.period = this.periodList[0].dictValue
      } else {
        //大于等于31天
        let threeMonth = this.moment(e).subtract(3, 'months')
        let isLimitThree = this.moment(threeMonth).isBefore(startTime)
        //统计时间31天-3个月，默认【周】统计;统计时间超过3个月，默认【月】单位统计
        this.period = isLimitThree
          ? this.periodList[1].dictValue
          : (this.period = this.periodList[2].dictValue)
      }
      this.clickSearch = true
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#newAnalysis {
  .echarts-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding-left: 20px;
  }
  .box {
    width: 100%;
    height: 400px;
  }
  .date-btn {
    float: right;
    margin-right: 50px;
  }
  .el-radio-button__inner {
    padding: 8px 20px;
  }
  .margin0 {
    margin-bottom: 0;
  }
  .echarts-title {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    padding: 10px 0 10px 30px;
  }
}
</style>
